<template>
  <el-dialog
    v-drag-dialog
    title="编辑商品图片"
    :visible.sync="dialogVisible"
    width="76%"
    :before-close="onBeforeClose"
  >
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="19">
            调整顺序：用鼠标拖动要调整顺序的图片到新位置即可；
            <br />删除图片：单击图片右上角的X标志即可删除该图片。
          </el-col>
          <el-col :span="5">
            <div class="center">
              <el-button @click="onCancel">取消</el-button>
              <el-button type="primary" :loading="submiting" @click="onSubmit">提交</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <draggable v-model="pics">
          <!--@chang="change" @start="start" @end="end" :move="move"-->
          <!-- <transition-group> -->
          <div v-for="(item, index) in pics" :key="index" class="fleft">
            <div sytle="width:100%;text-align:center;">{{index+1}}</div>
            <div class="del" @click="onDelPic(index)">
              <i class="el-icon-close"></i>
            </div>
            <img :src="item" width="100%" />
          </div>
          <!-- </transition-group> -->
        </draggable>
      </el-main>
    </el-container>
  </el-dialog>
</template>
<script>
import {
  updateProductLogoList //url: '/Product/UpdateProductLogoList'
} from "@/api/product";
import draggable from "vuedraggable";
export default {
  name: "HelloWorld",
  props: {},
  components: {
    draggable
  },
  data() {
    return {
      dialogVisible: false,
      spId: 0,
      pics: [], //maxpic暂时放的350的
      oldPics: "",
      submiting:false //正在提交
    };
  },
  methods: {
    Show(spId, pics) {
      this.spId = spId;
      this.oldPics = JSON.stringify(pics); //用于比较是否修改过
      this.pics = JSON.parse(this.oldPics);
      this.dialogVisible = true;
    },
    onDelPic(i) {
      this.pics.splice(i, 1);
    },
    onSubmit() {
      this.submiting=true;
      let logoFileList = [];
      this.pics.forEach(pic => {
        let at = pic.lastIndexOf("/");
        let fileName = pic.substring(at + 1);
        logoFileList.push(fileName);
      });
      let data = {
        id: this.spId,
        logo_list: logoFileList
      };
      updateProductLogoList(data).then(r => {
        if (r.code == 0) {
          this.$message("成功提交！");
          this.$emit('change',logoFileList);
          this.dialogVisible=false;          
        } else {
          this.$message.error("提交修改的商品展示图片出错！原因：" + r.msg);
        }
        this.submiting=false;
      });
    },
    Done(){
      this.dialogVisible = false;
    },
    onCancel() {
      this.onClose(this.Done);
    },
    onBeforeClose(done) {
      this.onClose(done);
    },
    onClose(done) {
      if(this.submiting){
        this.$message.error('正在提交修改结果，请稍等！');
        return;
      }
      let nPs = JSON.stringify(this.pics);
      if (nPs != this.oldPics) {
        //有修改时的退出提示
        this.$confirm("你的修改未提交, 是否放弃?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "返回提交",
          type: "warning"
        })
          .then(() => {
            done();
          })
          .catch(() => {});
      } else {
        //无修改直接退出
        done();
      }
    }
    //-----以下是事件演示---------------------------------
    // change(event) {
    //   console.log("change", event);
    // },
    // start(event) {
    //   console.log("start", event);
    // },
    // end(event) {
    //   console.log("end", event, this.groups);
    // },
    // move(event, orgin) {
    //   console.log("move", event, orgin);
    // }
  }
};
</script>

<style lang="scss" scoped>
.el-container {
  height: 540px;
  .el-header {
    border-bottom: 1px solid lightgray;
  }
}
.bnt-center {
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.fleft {
  position: relative;
  float: left;
  width: 14.285%;
  margin-bottom: 20px;
  padding: 10px;
  text-align: center;
  .del {
    display: none;
    position: absolute;
    right: 10px;
    background-color: white;
    border: 1px solid black;
  }
  .del:hover {
    cursor: pointer;
  }
}
.fleft:hover {
  cursor: move;
  .del {
    display: block;
  }
}
</style>